<template>
  <view class="container" v-if="hotel">
    <!-- 酒店图片轮播 -->
    <swiper class="swiper" circular autoplay>
      <swiper-item>
        <image :src="hotel.imageUrl" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item v-for="(room, index) in hotel.rooms" :key="index">
        <image :src="room.imageUrl || '/static/images/room-default.jpg'" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 酒店信息 -->
    <view class="hotel-info">
      <view class="title">{{ hotel.name }}</view>
      <view class="tags">
        <text class="tag">{{ getHotelType() }}</text>
        <text class="tag">{{ getHotelFeature() }}</text>
      </view>
      <view class="rating">
        <text class="score">{{ hotelScore }}</text>
        <text class="reviews">"{{ getReviewComment() }}"</text>
        <text class="count">{{ Math.floor(Math.random() * 2000) + 500 }}条点评</text>
      </view>
      <view class="description">
        {{ hotel.description }}
      </view>
      <view class="location">
        <text class="iconfont icon-location"></text>
        <text>{{ hotel.location }}</text>
        <text class="distance">距您{{ distance }}km</text>
      </view>
      <view class="contact">
        <text class="label">联系电话：</text>
        <text class="phone" @tap="callHotel">{{ hotel.phone }}</text>
      </view>
    </view>

    <!-- 房型列表 -->
    <view class="room-list">
      <view class="section-title">房型列表</view>
      <view class="room-item" v-for="(room, index) in hotel.rooms" :key="index">
        <image class="room-image" :src="room.imageUrl || '/static/images/room-default.jpg'" mode="aspectFill"></image>
        <view class="room-info">
          <view class="room-name">{{ room.roomType }}</view>
          <view class="room-tags">
            <text class="tag">{{ room.bedInfo || '大床' }}</text>
            <text class="tag">最多{{ room.maxOccupancy }}人</text>
            <text class="tag">{{ getRoomFeature(index) }}</text>
          </view>
          <view class="room-price">
            <text class="price">¥{{ room.roomPrice }}</text>
            <text class="unit">/晚</text>
          </view>
        </view>
        <button class="book-btn" @tap="bookRoom(room)">预订</button>
      </view>
    </view>

    <!-- 酒店设施 -->
    <view class="facilities">
      <view class="section-title">酒店设施</view>
      <view class="facility-grid">
        <view class="facility-item" v-for="(facility, index) in facilities" :key="index">
          <text class="iconfont" :class="facility.icon"></text>
          <text>{{ facility.name }}</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      hotelId: 0,
      hotel: null,
      loading: true,
      hotelScore: 4.8,
      distance: 2.5,
      facilities: [
        { name: '停车场', icon: 'icon-parking' },
        { name: '游泳池', icon: 'icon-pool' },
        { name: '健身房', icon: 'icon-gym' },
        { name: '餐厅', icon: 'icon-restaurant' },
        { name: 'WiFi', icon: 'icon-wifi' },
        { name: '会议室', icon: 'icon-meeting' }
      ],
      hotelTypes: ['五星级', '四星级', '商务酒店', '度假酒店', '精品酒店'],
      hotelFeatures: ['奢华享受', '环境优美', '服务周到', '性价比高', '地理位置佳'],
      reviewComments: [
        '环境优美 服务周到',
        '奢华享受 尊贵体验',
        '设施完善 体验一流',
        '交通便利 商务首选',
        '性价比高 家庭出游首选'
      ],
      roomFeatures: ['有窗', '含早餐', '免费取消', '可加床', '景观房']
    }
  },
  onLoad(option) {
    this.hotelId = option.id || 0
    this.fetchHotelDetail()
    
    // 生成随机评分和距离
    this.hotelScore = (4.5 + Math.random() * 0.5).toFixed(1)
    this.distance = (1 + Math.random() * 5).toFixed(1)
  },
  methods: {
    fetchHotelDetail() {
      this.loading = true
      // 使用API获取酒店详情
      uni.request({
        url: 'http://localhost:9527/Video/api/video/getHotelList',
        method: 'GET',
        success: (res) => {
          if (res.data && res.data.code === 200) {
            const hotels = res.data.data
            this.hotel = hotels.find(hotel => hotel.hotelId == this.hotelId)
            
            if (!this.hotel) {
              uni.showToast({
                title: '找不到该酒店信息',
                icon: 'none'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            }
            console.log('酒店详情:', this.hotel)
          } else {
            uni.showToast({
              title: '获取酒店详情失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          console.error('请求失败:', err)
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    getHotelType() {
      return this.hotelTypes[this.hotelId % this.hotelTypes.length]
    },
    getHotelFeature() {
      return this.hotelFeatures[this.hotelId % this.hotelFeatures.length]
    },
    getReviewComment() {
      return this.reviewComments[this.hotelId % this.reviewComments.length]
    },
    getRoomFeature(index) {
      return this.roomFeatures[index % this.roomFeatures.length]
    },
    bookRoom(room) {
      uni.navigateTo({
        url: `/pages/hotel/booking?hotelId=${this.hotelId}&roomId=${room.roomId}&roomType=${encodeURIComponent(room.roomType)}&price=${room.roomPrice}`
      })
    },
    callHotel() {
      if (this.hotel && this.hotel.phone) {
        uni.makePhoneCall({
          phoneNumber: this.hotel.phone,
          fail: () => {
            uni.showToast({
              title: '拨打电话失败',
              icon: 'none'
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.swiper {
  width: 100%;
  height: 500rpx;
  
  image {
    width: 100%;
    height: 100%;
  }
}

.hotel-info {
  background: #fff;
  padding: 30rpx;
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .tags {
    margin-bottom: 20rpx;
    
    .tag {
      display: inline-block;
      padding: 4rpx 16rpx;
      font-size: 24rpx;
      color: #4080ff;
      background: rgba(64, 128, 255, 0.1);
      border-radius: 4rpx;
      margin-right: 16rpx;
    }
  }
  
  .rating {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .score {
      font-size: 40rpx;
      font-weight: bold;
      color: #ff9500;
      margin-right: 20rpx;
    }
    
    .reviews {
      font-size: 28rpx;
      color: #666;
      margin-right: 20rpx;
    }
    
    .count {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }
  
  .location {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
    
    .iconfont {
      font-size: 32rpx;
      color: #4080ff;
      margin-right: 10rpx;
    }
    
    .distance {
      margin-left: auto;
      color: #999;
    }
  }
  
  .contact {
    font-size: 28rpx;
    color: #666;
    
    .label {
      margin-right: 10rpx;
    }
    
    .phone {
      color: #4080ff;
    }
  }
}

.room-list {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .room-item {
    display: flex;
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .room-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .room-info {
      flex: 1;
      
      .room-name {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 16rpx;
      }
      
      .room-tags {
        margin-bottom: 16rpx;
        
        .tag {
          display: inline-block;
          padding: 4rpx 16rpx;
          font-size: 24rpx;
          color: #666;
          background: #f5f5f5;
          border-radius: 4rpx;
          margin-right: 16rpx;
          margin-bottom: 8rpx;
        }
      }
      
      .room-price {
        .price {
          font-size: 36rpx;
          font-weight: bold;
          color: #ff4d4f;
        }
        
        .unit {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
    
    .book-btn {
      align-self: flex-end;
      width: 120rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #4080ff;
      color: #fff;
      font-size: 28rpx;
      border-radius: 30rpx;
      margin-bottom: 20rpx;
    }
  }
}

.facilities {
  margin-top: 20rpx;
  background: #fff;
  padding: 30rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
  }
  
  .facility-grid {
    display: flex;
    flex-wrap: wrap;
    
    .facility-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 25%;
      margin-bottom: 30rpx;
      
      .iconfont {
        font-size: 48rpx;
        color: #4080ff;
        margin-bottom: 10rpx;
      }
      
      text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 999;
  
  text {
    font-size: 28rpx;
    color: #666;
  }
}
</style> 